<!--  -->
<script setup>
import SimpleInput from '@/components/input/SimpleInput.vue'
import SubmitBtn from '@/components/button/SubmitBtn.vue'
import { ref } from 'vue'
import { addTagAPI } from '@/apis/tag'
import { useBreadsStore } from '@/stores'
import { useRouter } from 'vue-router'
import Card from '@/components/Card.vue'

const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([
  { title: '标签列表', path: '/tags' },
  { title: '新增标签' }
])


const router = useRouter()
const form = ref({
  slugName: '',
  displayName: '',
  content: ''
})

function addTag() {
  if (!form.value.slugName || !form.value.displayName || !form.value.content) {

    return
  }
   
  addTagAPI(form.value).then(() => {
    router.push('/tag/' + form.value.slugName)
  }).catch(() => null)

}
</script>

<template>
  <div class="view-container">
    <div class="left-wrapper">

      <h1>新增标签</h1>
      <div class="label">显示名称 <span class="desc"></span></div>
      <SimpleInput v-model="form.slugName" />
      <div class="label">URL 固定链接 <span class="desc">URL 固定链接不能超过 35 个字符。</span></div>
      <SimpleInput v-model="form.displayName" />
      <div class="label">描述 </div>
      <textarea v-model="form.content"></textarea>
      <div class="form-btn">
        <SubmitBtn @click="addTag">发布新标签</SubmitBtn>
      </div>
    </div>
    <div class="right-wrapper">
      <Card topic="如何排版">
        无
      </Card>
    </div>
  </div>

</template>

<style scoped lang="scss">
.view-container {
  display: flex;
  justify-content: space-between;
  min-height: 100%;
}

.left-wrapper {
  margin-right: 1em;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .label {
    font-size: 1.2rem;
    color: var(--text-02);

    .desc {
      font-size: 0.8rem;
      color: #979797;
    }
  }

  .form-btn {
    display: flex;
    margin-top: 2em;
    justify-content: flex-end !important;
  }

  input,
  textarea {
    padding: 4px 11px;
    font-size: 14px;
    line-height: 1.5;
    color: #444c3f;
    outline: none;
    border: 1px solid #9cb294;
    background-color: var(--bgc-02);
    border-radius: 2px;
  }

  textarea {
    min-height: 200px;
    height: auto;
    resize: vertical;
  }
}

.right-wrapper {
  position: relative;
  width: 300px;
  border-left: 1px dashed var(--border-secondary);
  padding: 0 1em;
}

.tag-container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 25px;

  .tag-input {
    width: 120px;
    height: 100%;
    outline: none;
    font-size: 14px;
    padding: 1px .5em;
    color: inherit;
    background-color: var(--bgc-02);
    border: 1px solid var(--border-primary);
    border-radius: 2px;

    &:hover {
      border-color: #4d9f00;
    }

  }
}
</style>
